import React, { Component } from 'react';
import { getSongSheet } from '../../../api/playlists';
import { createFromIconfontCN } from '@ant-design/icons';
import { iconUrl } from '../../../utlis/icons';
import { Pagination } from 'antd';
import { withRouter } from 'react-router-dom';
import './songSheetList.less';

const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl
});

class index extends Component {

  constructor() {
    super()
    this.state = {
      // tabBar 列表
      songList: ['全部', '欧美', '华语', '流行', '说唱', '摇滚', '民谣', '电子', '轻音乐', '影视原声', 'ACG', '怀旧', '治愈', '旅行'],

      // 总数
      total: 0,

      // 歌单数据
      playlists: [],

      // 当前页数
      current: 1,

      // 当前页的条数
      // pageSize: 10,

      // 当前的cat
      cat: '全部'
    }
  }

  // 生命周期函数调用函数对数据进行重新获取并渲染
  componentDidMount() {
    this.getSongSheetData(10, 0, '全部')
  }

  // 获取数据
  getSongSheetData = async (limit, offset, cat) => {
    const { data } = await getSongSheet(limit, offset, cat)
    // console.log(data)
    this.setState({
      // 要渲染的歌单数据
      playlists: data.playlists,

      // 歌单总数
      total: data.total,

      pageSize: data.playlists.length
    })
  }

  getTabBar = (cat) => {
    this.getSongSheetData(10, 0, cat)

    this.setState({
      current: 1,
      cat: cat
    })
  }


  // tabBar代码
  tabBarList = () => {
    return <>
      <div className="tab-bar">
        {
          this.state.songList.map((v, i) => {
            return <span key={i} className="bar-item" onClick={this.getTabBar.bind(this, v)}>{v}</span>
          })
        }
      </div>
    </>
  }

  // 主体代码
  tabContainer = () => {
    return this.state.playlists ? <>
      <div className="tab-content">
        <div className="items">
          {
            this.state.playlists.map((v, i) => {
              return <div className="item" key={i} onClick={() => {
                this.props.history.push(`/playlists/${v.id}`)
              }}>
                <div className="img-warp">
                  <div className="num-warp">
                    播放量：<span className="num">{v.playCount}</span>
                  </div>
                  <img src={v.coverImgUrl} alt="" />
                  <span className="iconfonts">
                    <IconFont type="iconbofang6" />
                  </span>
                </div>
                <p className="name">{v.description}</p>
              </div>

            })

          }
        </div>
      </div>

    </> : ''
  }

  // 点击按钮重新获取数据
  onChangePage = (page, pageSize) => {
    let offset = (page - 1) * 10
    this.getSongSheetData(10, offset, this.state.cat)

    this.setState({
      current: page
    })
  }

  render() {
    return (
      <div className="tab-container">
        {
          this.tabBarList()
        }

        {
          this.tabContainer()
        }

        {/* 底部的分页 */}
        <div className="tab-footer">
          <Pagination total={this.state.total} current={this.state.current} onChange={this.onChangePage} />
        </div>

      </div>
    )
  }
}

export default withRouter(index)